<%@page import="java.util.List"%>
<%@page import="com.erp.po.Providers"%>
<%@page import="com.erp.po.Categorys"%>
<%@page import="com.erp.po.Products"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	span {
		font-size: 12px; 
	}
</style>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/javascript/My97DatePicker/WdatePicker.js"></script>

<%-- <%
	// 商品
	Products p = (Products) request.getAttribute("p");

	// 类别
	List<Categorys> cate = (List<Categorys>) request.getAttribute("cateList");

	// 供应商
	List<Providers> prod = (List<Providers>) request.getAttribute("proList");

	// 是否修改
	// int i = (int)request.getAttribute("i");
%> --%>
</head>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/javascript/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/javascript/table/bootstrap-table.css">
<script src="${pageContext.request.contextPath}/javascript/jQuery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/javascript/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/locale/bootstrap-table-zh-CN.js"></script>
<body>
	<h3>商品修改</h3>
	<form id="myForm" action="productServlet?op=doEditProductById" method="post">
		<table class="table table-hover">
			<tr>
					<input type="text" id="proId" name="proId"	value="${p.productId}" readonly hidden />
			</tr>
			<tr>
				<td style="width:200px;">商品名称</td>
				<td style="width:240px;">
					<input class="form-control" type="text" id="proName" name="proName" value="${p.productName}" onblur="checkProName(this, 2)" />
				</td>
				<td>
					<span id="sProName"></span>
				</td>
			</tr>
			<tr>
				<td>进价</td>
				<td>
					<input class="form-control" type="text" id="incomePrice" name="incomePrice" value="${p.incomePrice}" onblur="checkIncomePrice(this,0)" />
				</td>
				<td>
					<span id="sIncomePrice"></span>
				</td>
			</tr>
			<tr>
				<td>数量</td>
				<td>
					<input class="form-control" type="number" id="quantity" name="quantity" value="${p.quantity}" onblur="checkQuantity(this,1)" />
				</td>
				<td>
					<span id="sQuantity"></span>
				</td>
			</tr>
			<tr>
				<td>售价</td>
				<td>
					<input class="form-control" type="text" id="salesPrice" name="salesPrice" value="${p.salesPrice}" onblur="checkSalesPrice(this,0)" />
				</td>
				<td>
					<span id="sSalesPrice"></span>
				</td>
			</tr>
			<tr>
				<td>类别</td>
				<td><select class="form-control" name="categoryId" id="categoryId">
						<c:forEach items="${cateList}" var="cate">
							<c:if test="${p.categorys.categoryId == cate.categoryId}">
								<option value="${cate.categoryId}" selected>${cate.categoryName}</option>
							</c:if>
							<c:if test="${p.categorys.categoryId != cate.categoryId}">
								<option value="${cate.categoryId}">${cate.categoryName}</option>
							</c:if>
						</c:forEach>
					
				</select>
				</td>
				<td>
					<span id="sCategoryId"></span>
				</td>
			</tr>
			<tr>
				<td>供应商</td>
				<td><select class="form-control" name="providerId" id="providerId">
						<c:forEach items="${proList}" var="pro">
							<c:if test="${p.providers.providerId == pro.providerId}">
								<option value="${pro.providerId}" selected>${pro.providerName}</option>
							</c:if>
							<c:if test="${p.providers.providerId != pro.providerId}">
								<option value="${pro.providerId}">${pro.providerName}</option>
							</c:if>
						</c:forEach>
					
				</select>
				</td>
				<td>
					<span id="sProviderId"></span>
				</td>
			</tr>
			<tr>
				<td>进货时间</td>
				<td>
					<input class="form-control" type="text" id="incomeTime" name="incomeTime" onclick="WdatePicker()" value="${p.incomeTime}" onblur="checkIncomeTime(this,3)" />
				</td>
				<td>
					<span id="sIncomeTime"></span>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<input class="btn btn-success" type="button" value="确定修改" onclick="checkDate()" /> 
					<input class="btn btn-info" type="reset" value="重置" />
				</td>
			</tr>


		</table>



	</form>

</body>

<script>
	

	//获取到xmlHttpRequest 对象
	var xmlhttp;
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// 简化数据 value 获取
	function $(id) {
		return document.getElementById(id);
	}

	// 使用正则表达式 校验数据
	function regCheck(str, index) {
		var arr = [
				/^[0-9]+(\.[0-9]+)?$/, // 包含小数的正数
				/^[0-9]+$/, // 数字(整数)
				/^\s*$/, // 匹配空格
				// 匹配时间(已考虑润年) -- 格式 ("yyyy-MM-dd")
				/^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/ ];
		return arr[index].test(str);
	}

	// 正则表达式 校验 商品名称 , ajax校验重名


	function checkProName(obj, index) {
		// alert($("proId").value);
		// 正则表达式 校验 商品名称
		var proId = $("proId").value;
		var proName = $("proName").value;
		var s_name = $("sProName");
		var f = regCheck(obj.value, index);
		// alert(f+" -- 判断是否为空! true : 空  / false : 非空");
		if (f) {
			s_name.innerHTML = "<font color='red'> × 名称不能为空.</font>";
		} else {
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var msg = xmlhttp.responseText;
					if (msg == "可用") {
						s_name.innerHTML = "<font color='green'> √ </font>";
					} else if (msg == "重名") {
						s_name.innerHTML = "<font color='red'> × 名称已存在.</font>";
					}
				}
			}
			xmlhttp.open("GET", "productServlet?op=checkProductNameByEdit&id="+proId+"&proName="+proName,true);
			xmlhttp.send();
		}

		return f;
	}

	// 正则表达式 校验 进价
	function checkIncomePrice(obj, index) {
		var s_incomePrice = $("sIncomePrice");
		var f = regCheck(obj.value, index);
		if (f) {
			s_incomePrice.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_incomePrice.innerHTML = "<font color='red'> × 进价格式不正确.</font>";
		}
		return f;
	}

	// 正则表达式 校验 数量
	function checkQuantity(obj, index) {
		var s_quantity = $("sQuantity");
		var f = regCheck(obj.value, index);
		if (f) {
			s_quantity.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_quantity.innerHTML = "<font color='red'> × 数量格式不正确.</font>";
		}
		return f;
	}

	// 正则表达式 检验 售价
	function checkSalesPrice(obj, index) {
		var s_salesPrice = $("sSalesPrice");
		var f = regCheck(obj.value, index);
		if (f) {
			s_salesPrice.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_salesPrice.innerHTML = "<font color='red'> × 售价格式不正确.</font>";
		}
		return f;
	}

	// 正则表达式 校验 时间
	function checkIncomeTime(obj, index) {
		var s_incomeTime = $("sIncomeTime");
		var f = regCheck(obj.value, index);
		if (f) {
			s_incomeTime.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_incomeTime.innerHTML = "<font color='red'> × 时间格式不正确.</font>";
		}
		return f;
	}

	// 检查提交数据
	function checkDate() {

		var proName = $("proName");
		var incomePrice = $("incomePrice");
		var quantity = $("quantity");
		var salesPrice = $("salesPrice");
		var incomeTime = $("incomeTime");
		var categoryId = $("categoryId");
		var providerId = $("providerId");
		var myForm = $("myForm");

		if (!(regCheck(proName.value, 2)) && regCheck(incomePrice.value, 0)
				&& regCheck(quantity.value, 1) && regCheck(salesPrice.value, 0)
				&& regCheck(incomeTime.value, 3)) {
			// alert("提交!");
			// myForm.submit();
			
			if(proName.value == "${p.productName}" && incomePrice.value == "${p.incomePrice}"
					&& quantity.value == "${p.quantity}" && salesPrice.value == "${p.salesPrice}"
					&& incomeTime.value == "${p.incomeTime}" && categoryId.value == "${p.categorys.categoryId}"
					&& providerId.value == "${p.providers.providerId}"){
				alert("当前数据未修改,请修改后提交.");
			} else {
				// alert("提交!");
				myForm.submit();
			}
		} else {
			alert("有数据未正确填写!");
		}

	}
</script>


</html>